<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style">
      <el-row class="py-20">
        <el-col class="text-right">
          <el-form :inline="true">
            <el-form-item label="账单时间">
              <el-date-picker
                v-model="month"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择月"
                @change="changeMonth"
              >
              </el-date-picker>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="success" plain @click="addBillVisible = true">新增账单</el-button>
            </el-form-item>
            <el-form-item>
              <el-button>水费账单设置</el-button>
            </el-form-item> -->
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            stripe
            :data="tableData"
            style="width: 100%"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column prop="recordTime" label="账单时间"> </el-table-column>
            <el-table-column prop="billStartTime" label="计算开始日期"> </el-table-column>
            <el-table-column prop="billEndTime" label="计算截止日期"> </el-table-column>
            <el-table-column prop="adminName" label="计算人"> </el-table-column>
            <el-table-column prop="billTime" label="计算日期"> </el-table-column>
            <el-table-column prop="billId" label="操作" width="100">
              <template v-slot="scope">
                <!-- <el-button type="text" @click="goBillDetail(scope.row)">查看详细</el-button> -->
                <i
                  @click="goBillDetail(scope.row)"
                  class="text-20 curser-pointer text-primary mr-20 el-icon-s-comment"
                ></i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <!-- <el-dialog title="新建账单" :visible.sync="addBillVisible" width="50%">
        <el-row>
          <el-col>
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="账单时间">
                <el-date-picker v-model="form.month" type="month" placeholder="选择月"> </el-date-picker>
              </el-form-item>

              <el-form-item label=" 计算起止时间">
                <el-date-picker
                  v-model="form.times"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addBillVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBillVisible = false">确 定</el-button>
        </span>
      </el-dialog> -->
    </el-col>
  </el-row>
</template>

<script>
// 账单
import { waterBillQueryPage } from '@/config/api'
export default {
  data() {
    return {
      addBillVisible: false,
      form: {
        month: '',
        tiems: []
        //.....
      },
      month: '',
      pageSizes: [5, 10, 15, 20],
      pageSize: 5,
      total: 0,
      currentPage: 1,
      tableData: []
    }
  },
  created() {
    this.waterBillQueryPageHandler({ pageSize: this.pageSize, pageNum: this.currentPage })
  },
  methods: {
    goBillDetail(row) {
      sessionStorage.setItem('bill', JSON.stringify(row))
      this.$store.commit('bill', row)

      this.$router.push(`/home/bill_detail`)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.waterBillQueryPageHandler({ pageSize: size, pageNum: 1 })
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.waterBillQueryPageHandler({ pageSize: this.pageSize, pageNum: page })
    },
    // 请求后台账单数据
    waterBillQueryPageHandler(params) {
      waterBillQueryPage(params).then(res => {
        console.log(res)
        if (res.code === 200) {
          let arr = []
          res.data.list.forEach(el => {
            // 组合表格可以直接渲染得对象数据后，在push到arr,最后赋值给tableData
            let obj = {
              ...el.bill,
              adminName: el.bill.admin.adminName,
              ...el.degreeRecordDto,
              billingName: el.billingName
            }
            // console.log(obj)
            arr.push(obj)
          })
          this.tableData = arr
          this.total = res.data.total
          // console.log(this.tableData)
        } else {
          this.$message({
            message: '请求失败',
            type: 'error'
          })
        }
      })
    },
    // 改变账单时间时，重新请求后台数据
    changeMonth() {
      // console.log(this.month)
      this.pageSize = 5
      this.currentPage = 1
      this.waterBillQueryPageHandler({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        recordTime: this.month
      })
    }
  }
}
</script>

<style></style>
